<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>公司钱包信息</span>
      </div>

      <el-form label-position="right" label-width="120px">
        <el-form-item label="钱包余量(kg)">
          <el-input v-model="walletForm.walletFree" readonly></el-input>
        </el-form-item>
        <el-form-item label="总收入量(kg)">
          <el-input v-model="walletForm.walletIncome" readonly></el-input>
        </el-form-item>
        <el-form-item label="总支出量(kg)">
          <el-input v-model="walletForm.walletOutcome" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>钱包流水</span>
      </div>
      <el-table v-loading="loading" :data="dealCompanyList">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="司机姓名" align="center" prop="userName"/>
        <el-table-column label="联系电话" align="center" prop="userPhone"/>
        <el-table-column label="变动量(kg)" align="center" prop="dealAmount"/>
        <el-table-column label="业务类型" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.c_deal_type" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="交易时间" align="center" prop="createTime"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup>
import {getWalletCompany} from "@/api/consumer/walletCompany";
import {getCompanyId, getCompanyWalletDeal} from "@/api/consumer/admin/comWallet";

export default {
  dicts: ['c_deal_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公司钱包流水记录表格数据
      dealCompanyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyId: null,
        targetUserId: null,
        dealAmount: null,
        dealType: null,
        dealOriginalJson: null,
        dealDisposeJson: null,
        isDelete: null,
        status: null
      },
      walletForm: {
      },
    };
  },
  created() {
    this.getList();
    let that = this;
    getCompanyId().then(response => {
      this.companyId = response;
      console.log(response)
      console.log("获取公司用户id" + this.companyId);

      // 在获取到companyId后再调用getWalletCompanyDatiels
      that.getWalletCompanyDatiels(this.companyId);
    });
  },
  methods: {
    /** 查询公司钱包流水记录列表 */
    getList() {
      this.loading = true;
      getCompanyWalletDeal(this.queryParams).then(response => {
        this.dealCompanyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查询公司钱包
    getWalletCompanyDatiels(companyId) {
      console.log("chuanru公司id" + companyId);
      getWalletCompany(companyId).then(response => {
        console.log("获取公司钱包信息" + JSON.stringify(response.data));
        this.walletForm = response.data;
        console.log("获取公司钱包信息" + JSON.stringify(this.walletForm));
          this.loading = false;
        }
      );
    }

  }
}
</script>


<style scoped>
.wallet-page {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.wallet-form {
  max-width: 600px;
  margin: 0 auto;
}
</style>
